<template>
	<view class="">
		<scroll-view scroll-x="true" @scroll="scroll">
			<view style="width: 100vw;">
				<view class="d-flex" :style="{'width':props.list.length+'00vw'}">
					<view class="mypet-avatar flex-center-center"
						@click="goto('/pages/MyPet/addpetInformation?chokerId='+item.chokerId)"
						v-for="item in props.list">
						<up-avatar :src="item.petPhoto" shape="circle" size="100"></up-avatar>
					</view>
				</view>
			</view>
		</scroll-view>
		<view class="d-flex jc-center my-3">
			<view v-for="(item,index) in props.list"
				:style="{'backgroundColor': state.scrollLeft >= (state.screenWidth * index) && state.scrollLeft < (state.screenWidth * (index + 1)) ?'#969696':'#d5d5d5'}"
				style="width: 15rpx;height: 15rpx;border-radius: 50%" @click="indicatorkey = 0" class="mr-1"></view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive,
		defineProps,
		defineEmits
	} from 'vue'
	import {
		onLoad
	} from '@dcloudio/uni-app'

	const emits = defineEmits(['change'])

	const props = defineProps({
		list: {
			default: []
		}
	})

	let state = reactive({
		screenWidth: '',
		scrollLeft: ''
	})

	onLoad(() => {
		uni.getSystemInfo({
			success: function(res) {
				console.log('当前设备宽度:', res.screenWidth);
				state.screenWidth = res.screenWidth
			}
		});
	})
	const scroll = (e) => {
		state.scrollLeft = e.detail.scrollLeft
		emits('change', (state.scrollLeft / state.screenWidth).toFixed(0))

	}

	function goto(url) {
		uni.$to(url)
	}
</script>

<style>
	.mypet-avatar {
		width: 100vw;
	}
</style>